<template>
	<view class="app">
		<view class="price-box">
			<text style="font-size:  34upx;">支付金额</text>
			<text  class="price">{{allPrice}}</text>
		</view>

		<view class="pay-type-list">

			<view class="type-item b-b" @click="changePayType(1)">
				<text class="icon yticon icon-weixinzhifu"></text>
				<view class="con">
					<text class="tit" style="font-size:  34upx;">微信支付</text>
					<!-- <text>推荐使用微信支付</text> -->
				</view>
				<label class="radio">
					<radio value="" color="#62b9f9" :checked='payType == 1' />
					</radio>
				</label>
			</view>
			<!-- <view class="type-item b-b" @click="changePayType(2)">
				<text class="icon yticon icon-alipay"></text>
				<view class="con">
					<text class="tit">支付宝支付</text>
				</view>
				<label class="radio">
					<radio value="" color="#fa436a" :checked='payType == 2' />
					</radio>
				</label>
			</view> -->
			<!-- <view class="type-item" @click="changePayType(3)">
				<text class="icon yticon icon-erjiye-yucunkuan"></text>
				<view class="con">
					<text class="tit">预存款支付</text>
					<text>可用余额 ¥198.5</text>
				</view>
				<label class="radio">
					<radio value="" color="#fa436a" :checked='payType == 3' />
					</radio>
				</label>
			</view> -->
		</view>
		
		
		<view class="submitBtn">
			<view class="btnBoxW" style="width: 90%;">
				<u-button :customStyle='btnStyle'  type="primary" @click="confirm"  shape='circle' text="确认支付"></u-button>
			</view>
		</view>
		
		
		
		<!-- <view class="btnBottom">
			<text class="mix-btn" @click="confirm">确认支付</text>
		</view> -->
	</view>
</template>

<script>
   import {payOrder,getApplyDetails,checkOrderPay} from '@/api/index.js'
	export default {
		data() {
			return {
				payType: 1,
				allPrice:'',
				orderId:'',
				btnStyle:{
					fontSize:'16px',
					fontWeight:'bold',
					height:'45px'
				}
			};
		},
		computed: {
		
		},
		onShow() {
			this.checkOrderEvent(this.orderId);
			this.getOrderDetails(this.orderId);
			console.log(this.orderId,"======");
		},
		onLoad(options) {
			if(options && options.id){
				this.orderId = options.id
			}
			console.log(options,"======");
		},

		methods: {
			/* 校验订单状态 */
			checkOrderEvent(id){
				uni.showLoading({
					title:"加载中..."
				})
				
				checkOrderPay({applyId:id}).then(res=>{
					uni.hideLoading();
					/* PAY_SUCCESS 已支付
					PAY_NO 未支付
					PAY_FAIL 支付失败 */
					console.log(res,"======");
					if(res.retCode == 'PAY_SUCCESS'){
						uni.navigateTo({
							url:'/pages/historyList/historyList'
						})
					}else if(res.retCode == 'PAY_NO'){
						this.confirm()
					}else if(res.retCode == 'PAY_FAIL'){
						this.confirm()
					}
				})
			},
			/* 查询支付金额 */
			getOrderDetails(id){
				uni.showLoading({
					title:"加载中..."
				})
				getApplyDetails(id).then(res=>{
					uni.hideLoading()
					this.allPrice = res.retData.apay;
				})
			},
			
			//选择支付方式
			changePayType(type) {
				this.payType = type;
			},
			//确认支付
			async confirm(){
				uni.showLoading({
					title:'加载中...'
				})
				const orderId = this.orderId;
				await payOrder({applyId:orderId}).then(res=>{
					console.log(res,"+++++++");
					/* const data = res.data */
					// 检测支付环境中的 WeixinJSBridge
					if (typeof WeixinJSBridge == "undefined") {
						if (document.addEventListener) {
							document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
						} else if (document.attachEvent) {
							document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
							document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
						}
					} else {
						this.onBridgeReady(res);
					}
					uni.hideLoading()
				})
				
			},
			
			
			onBridgeReady(data) {
				console.log("调用支付",data,"=================");
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": data.retData.appId, //公众号名称，由商户传入     
						"timeStamp": data.retData.timeStamp, //时间戳，自1970年以来的秒数     
						"nonceStr": data.retData.nonceStr, //随机串     
						"package": data.retData.package,
						"signType": data.retData.signType, //微信签名方式：     
						"paySign": data.retData.paySign //微信签名 
					},
					function(res) {
						// 支付成功
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							console.log("支付成功!");
							/* uni.showToast({
								title: '微信支付成功',
								icon: 'none'
							}) */
							/* setTimeout(() => {
								uni.navigateTo({
									url: '/pages/paySuccess/paySuccess',
								});
							}, 1500); */
						}
						// 支付过程中用户取消
						if (res.err_msg == "get_brand_wcpay_request:cancel") {
							console.log("取消支付!");
							/* uni.showToast({
								title: '取消支付',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/historyList/historyList',
								});
							}, 1500); */
						}
						// 支付失败
						if (res.err_msg == "get_brand_wcpay_request:fail") {
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							})
			
						}
						/**
						 * 其它
						 * 1、请检查预支付会话标识prepay_id是否已失效
						 * 2、请求的appid与下单接口的appid是否一致
						 * */
						if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {
			
						}
					});
			}
			
		}
	}
</script>

<style lang='scss'>
	.app {
		width: 100%;
	}

	.price-box {
		background-color: #fff;
		height: 265upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #909399;

		.price{
			font-size: 50upx;
			color: #303133;
			margin-top: 12upx;
			&:before{
				content: '￥';
				font-size: 40upx;
			}
		}
	}

	.pay-type-list {
		margin-top: 20upx;
		background-color: #fff;
		/* padding-left: 60upx; */
		
		.type-item{
			height: 120upx;
			padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position:relative;
		}
		
		.icon{
			width: 100upx;
			font-size: 52upx;
		}
		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}
		.icon-weixinzhifu {
			color: #36cb59;
		}
		.icon-alipay {
			color: #01aaef;
		}
		.tit{
		/* 	font-size: $font-lg; */
			/* color: $font-color-dark; */
			margin-bottom: 4upx;
		}
		.con{
			flex: 1;
			display: flex;
			flex-direction: column;
			/* font-size: $font-sm;
			color: $font-color-light; */
		}
	}
	.btnBottom{
		text-align: center;
        width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.mix-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40upx;
		width: 690upx;
		height: 80upx;
		font-size: 34upx !important;
		color: #fff;
		  /* 	background-color: $base-color; */
		border-radius: 10upx;
		  /* 	box-shadow: 1px 2px 5px #5088fd;	 */
		background: linear-gradient(90deg, #5088FD 0%, #62B9F9 100%);
	}

</style>
